import React, { Component } from 'react';
import { SearchOutline } from 'antd-mobile-icons'
import '../../styles/Indexs/Cate.scss'
import { SideBar } from 'antd-mobile'
import * as service from '../../api/index'

class Cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            tabs: [],
            right2: []
        }
    }
    async componentDidMount() {
        var res3 = await service.pro_categorylist()
        this.setState({ tabs: res3.data.data })

        var res = await service.pro_categorybrandlist({ category: res3.data.data[0] })
        console.log(res.data.data)


        var res2 = await service.pro_categorybrandprolist({ count: 1, limitNum: 10, category: res3.data.data[0], brand: '小米' })
        console.log(res2.data.data)
        this.setState({ right2: res2.data.data })
    }
    async categorybrandlist(e) {
        console.log(e)
        var res = await service.pro_categorybrandlist({ category: this.state.tabs[e] })
        var res2 = await service.pro_categorybrandprolist({ count: 1, limitNum: 10, category: this.state.tabs[e], brand: res.data.data[0].brand })
        console.log(res2.data.data)
        this.setState({ right2: res2.data.data })
    }
    gosearck() {//去搜索页
        this.props.history.push('/search')
    }
    rightonClick(item) {
        this.props.history.push({ pathname: '/detail', state: { id: item.proid } })
    }
    render() {
        return (
            <div className='cate' >
                <header>
                    <div className='left'>
                        <span className=' iconfont icon-xiangzuojiantou' ></span>
                    </div>
                    <div className='middle' >
                        <div className="searchbox" onClick={() => { this.gosearck() }} >
                            <span><SearchOutline /></span>
                            <p>立柜式空调</p>
                        </div>
                    </div>

                </header>
                <div className="main_box">
                    <div className="left">
                        <SideBar onChange={(e) => { this.categorybrandlist(e) }}  >
                            {this.state.tabs.map((item, index) => (
                                <SideBar.Item key={index} title={item} />
                            ))}
                        </SideBar>
                    </div>
                    <div className="right">
                        {
                            this.state.right2 && this.state.right2.map((item, index) => {
                                return (
                                    <div className="list2" key={index} >
                                        <p>{item.brand}</p>
                                        <div className="list3">
                                            <div className="item2" key={index} onClick={() => { this.rightonClick(item, index) }}  >
                                                <img src={item.img1} alt="" />
                                                <div className='text'>{item.proname}</div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

export default Cate;